{% extends "_layouts/site.html" %}

{% block title %}Accessibility guidelines{% endblock %}
{% block description %}Vanilla Framework accessibility guidelines{% endblock %}
{% block copydoc %}https://docs.google.com/document/d/1_cCvuHSwS9i0pzD_4WHDFoTenVAfZVr9qGxG-rSHHGY/edit{% endblock %}

{% block content %}
<div id="main-content" class="p-strip">
    <div class="row">
      <div class="col-12">
        <h1>Accessibility guidelines</h1>
        <p>Vanilla Framework aims for Level AA conformance with the <br><a href="https://www.w3.org/TR/WCAG22/">Web Content Accessibility Guidelines (WCAG) 2.2</a></p>
      </div>
    </div>
</div>

<div class="u-fixed-width">
  <hr />
</div>

<div class="p-strip">
    <div class="row">
      <div class="col-6">
        <h2>Ensuring conformance</h2>
        <p>We use the following tools to continually audit the framework:</p>
      </div>
      <div class="col-6">
        <p class="p-heading--5 u-no-margin--bottom"><a href="https://www.w3.org/WAI/eval/report-tool/evaluation/audit-sample">Accessibility report tool</a></p>
        <p>A checklist that can be filtered by A / AA level, with a short description and links to the related "Understanding" and "How to Meet" articles that accompany each criterion.</p>
        <p class="p-heading--5 u-no-margin--bottom"><a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a></p>
        <p>
          <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> A guide for understanding how to use <cite><a href="https://www.w3.org/TR/wai-aria-1.1/"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> 1.1</a></cite> to create an accessible Rich Internet Application. It provides guidance on the appropriate application of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>, describes recommended <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> usage patterns, and explains concepts behind them.</p>
        <p class="p-heading--5 u-no-margin--bottom"><a href="https://validator.w3.org/nu/">The W3 Markup Validation Service</a></p>
      </div>
    </div>
</div>

<div class="u-fixed-width">
  <hr />
</div>

<div class="p-strip">
    <div class="row">
      <div class="col-6">
        <h2>Curated criteria checklist</h2>
        <p class="u-no-padding--bottom">The scope of the WCAG spec can be overwhelming. We find the following checklist a good starting point if you're new to accessibility:</p>
      </div>
      <div class="col-6">
      </div>
    </div>
</div>

<div class="p-strip u-no-padding--top">
    <div class="u-fixed-width">
      <ul class="p-list is-split">
        <li class="p-list__item is-ticked">Make sure there is enough contrast between text and its background color</li>
        <li class="p-list__item is-ticked">Don't indicate important information using colour alone</li>
        <li class="p-list__item is-ticked">Design focus states to help users navigate and understand where they are</li>
        <li class="p-list__item is-ticked">Links should be visually identifiable and have clearly distinct states</li>
        <li class="p-list__item is-ticked">Be as consistent and clear as possible in layout and copy</li>
        <li class="p-list__item is-ticked">The general architecture and hierarchy of the content should make sense</li>

        <li class="p-list__item is-ticked">Help users understand inputs, and help them avoid and correct mistakes</li>
        <li class="p-list__item is-ticked">Write good alt text for your images</li>
        <li class="p-list__item is-ticked">Make links descriptive</li>
        <li class="p-list__item is-ticked">Users should be able to navigate content using a screen reader</li>
        <li class="p-list__item is-ticked">If an experience cannot be made accessible, create another route for users to get that information</li>

        <li class="p-list__item is-ticked">Use the correct HTML element for your content</li>
        <li class="p-list__item is-ticked">Support keyboard navigation</li>
        <li class="p-list__item is-ticked">Understand and use region landmarks</li>
        <li class="p-list__item is-ticked">Unless all your content is inside region markups, give users a way to skip top level navigation to access main content</li>
        <li class="p-list__item is-ticked">Use ARIA roles, properties and states when applicable</li>
        <li class="p-list__item is-ticked">Avoid images and iconography in pseudo-elements</li>
        <li class="p-list__item is-ticked">Hide decorative elements from screen readers</li>
        <li class="p-list__item is-ticked">Make SVGs accessible to assistive technology</li>
        <li class="p-list__item is-ticked">HTML document should have a language attribute</li>
      </ul>
      <p>*Adapted from <a href="http://accessibility.voxmedia.com">Accessibility Guidelines</a> checklist and <a href="http://a11yproject.com/checklist.html">Web Accessibility Checklist</a></p>
    </div>
</div>

<div class="u-fixed-width">
  <hr />
</div>

<div class="p-strip">
    <div class="row">
      <div class="col-6">
        <h2>Key WCAG documents</h2>
        <p>The volume of information on the WCAG 2.0 website can be disorienting. <br>We keep the following links handy for quick reference:</p>
      </div>
    </div>
</div>

<div class="p-strip u-no-padding--top">
    <div class="row">
      <ul class="p-list is-split">
        <li class="p-list__item"><a href="https://www.w3.org/TR/WCAG20/">WCAG 2.0</a>: the W3C standard, includes principles, guidelines and success criteria</li>
        <li class="p-list__item"><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/">Understanding WCAG 2.0</a>: detailed reference, includes intent, benefits to people with disabilities, examples, resources and techniques</li>
        <li class="p-list__item"><a href="https://www.w3.org/WAI/WCAG20/quickref/">How to Meet WCAG 2.0</a>: a customisable quick reference, includes guidelines, success criteria and techniques</li>
        <li class="p-list__item"><a href="https://www.w3.org/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</a>: instructions for developers, includes browser and assistive technology support notes, examples, code, resources and test procedures</li>
      </ul>
    </div>
</div>

<div class="u-fixed-width">
  <hr />
</div>

<div class="p-strip">
    <div class="row">
      <div class="col-6">
        <h2>Useful tools</h2>
        <p>The web is abundant in tools that help to create and test for accessible sites. We find the following particularly useful:</p>
      </div>
      <div class="col-6">
        <ul class="p-list--divided">
          <li class="p-list__item"><a href="https://developer.chrome.com/docs/devtools/accessibility/reference/">Chrome Accessibility Developer Tools</a></li>
          <li class="p-list__item"><a href="https://webaim.org/resources/contrastchecker/">Contrast checker tool</a></li>
          <li class="p-list__item"><a href="http://www.chromevox.com/">ChromeVox: a screen reader for Chrome</a></li>
          <li class="p-list__item"><a href="http://web.archive.org/web/20230307004829/https://the-pastry-box-project.net/anne-gibson/2014-july-31">Accessibility Alphabet</a></li>
          <li class="p-list__item"><a href="https://webaim.org/">Web Accessibility in Mind</a></li>
        </ul>
      </div>
    </div>
</div>

<div class="u-fixed-width">
  <hr />
</div>

<div class="p-strip">
    <div class="u-fixed-width">
      <h2>Noticed an issue?</h2>
      <p>If you spot an accessibility problem in Vanilla, let us know <br> by <a href="https://github.com/canonical/vanilla-framework/issues">filing&nbsp;an&nbsp;issue</a> on GitHub.</p>
    </div>
</div>
{% endblock %}
